<template>
	<view class="container">
		<view class="list">
			<view v-for="(item, index) in rainData" :key="index" class="list-item">
				<view class="info">
					<text class="rainfall">{{ item.rainfall }} mm</text>
					<text class="description">{{ getRainInfo(item.rainfall).description }}</text>
					<text class="level">等级: {{ getRainInfo(item.rainfall).levelText }}</text>
				</view>
				<view class="icon-container">
					<view class="icons">
						<view v-for="n in getRainInfo(item.rainfall).iconCount" :key="n" class="rain-icon"
							:style="{ backgroundColor: getRainInfo(item.rainfall).color, height: getIconHeight(item.rainfall) }">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rainData: [{
						rainfall: 0.5
					},
					{
						rainfall: 5
					},
					{
						rainfall: 15
					},
					{
						rainfall: 30
					},
					{
						rainfall: 70
					},
					{
						rainfall: 150
					},
					{
						rainfall: 250
					}
				]
			};
		},
		methods: {
			getIconHeight(rainfall) {
				// 根据降雨量返回不同高度
				const info = this.getRainInfo(rainfall);
				if (info.iconCount === 1) return '120rpx';
				if (info.iconCount === 2) return '60rpx';
				if (info.iconCount === 3) return '40rpx';
				if (info.iconCount === 5) return '24rpx';
				return '100rpx';
			},
			getRainInfo(rainfall) {
				if (rainfall >= 0.2 && rainfall <= 0.9) {
					return {
						color: '#52c41a',
						iconCount: 5,
						levelText: '零、一级',
						description: '零星小雨'
					};
				} else if (rainfall >= 1 && rainfall <= 9.9) {
					return {
						color: '#1890ff',
						iconCount: 4,
						levelText: '一、二级',
						description: '小雨'
					};
				} else if (rainfall >= 10 && rainfall <= 24.9) {
					return {
						color: '#075fbd',
						iconCount: 3,
						levelText: '二、三、四级',
						description: '中雨'
					};
				} else if (rainfall >= 25 && rainfall <= 49.9) {
					return {
						color: '#fadb14',
						iconCount: 5,
						levelText: '一、二、三、四、五级',
						description: '大雨'
					};
				} else if (rainfall >= 50 && rainfall <= 99.9) {
					return {
						color: '#fa8c16',
						iconCount: 5,
						levelText: '一、二、三、四、五级',
						description: '暴雨'
					};
				} else if (rainfall >= 100 && rainfall <= 199.9) {
					return {
						color: '#f5222d',
						iconCount: 2,
						levelText: '四、五级',
						description: '大暴雨'
					};
				} else if (rainfall >= 200) {
					return {
						color: '#722ed1',
						iconCount: 1,
						levelText: '五级',
						description: '特大暴雨'
					};
				} else {
					return {
						color: '#d9d9d9',
						iconCount: 0,
						levelText: '无',
						description: '无降水'
					};
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.info {
		flex: 1;
	}

	.rainfall {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.description {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.level {
		display: block;
		font-size: 24rpx;
		color: #999;
	}

	.icon-container {
		margin-left: 20rpx;
	}

	.icons {
		display: flex;
		flex-direction: column;
		gap: 12rpx; /* 间隙调大到12rpx */
		height: 140rpx; /* 增加总高度以适应更大的间隙 */
		justify-content: flex-start;
		align-items: center;
	}

	.rain-icon {
		width: 10rpx;
		border-radius: 4rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
	}
</style>